<template>
	<view>
		<simple-toolbar :title="$t('user.changePassword')">
			<view class="returnToConfirm">
				<el-button @click="navBack">{{ $t('user.return') }}</el-button>
				<el-button @click="confirm" type="primary" :disabled="success">{{ $t('user.confirm') }}</el-button>
			</view>
		</simple-toolbar>
		
		<view class="pad-base form">
			<el-form :model="formData" :rules="rules" ref="formData" label-position="top">
				<el-form-item>
					<el-input type="password"></el-input>
				</el-form-item>
				<el-form-item :label="$t('user.oldPassword')" prop="password">
					<el-input v-model="formData.password" type="password" :placeholder="$t('user.oldPassword_pla')"></el-input>
				</el-form-item>
				<el-form-item :label="$t('user.newPassword')" prop="new_password">
					<el-input v-model="formData.new_password" type="password" :placeholder="$t('user.newPassword_pla')"></el-input>
				</el-form-item>
				<el-form-item :label="$t('user.confirmPassword')" prop="new_password2">
					<el-input v-model="formData.new_password2" type="password" :placeholder="$t('user.confirmPassword_pla')"></el-input>
				</el-form-item>
			</el-form>
		</view>
	</view>
</template>

<script>
	import {
		changePwd
	} from "../../../js_sdk/uni-admin/user.js"
	
	export default {
		data() {
			return {
				success: false,
				formData: {
					password: '',
					new_password: '',
					new_password2: ''
				},
				rules: {
					password: [{
						required: true,
						// message: this.$t('user.oldPassword_pla'),
						validator: (rule, value, callback) => {
							if (value === '') {
								callback(new Error(this.$t('user.oldPassword_pla')))
							} else {
								callback()
							}
						},
						trigger: 'blur'
					}],
					new_password: [{
						required: true,
						// message: this.$t('user.newPassword_pla'),
						validator: (rule, value, callback) => {
							if (value === '') {
								callback(new Error(this.$t('user.newPassword_pla')))
							} else {
								callback()
							}
						},
						trigger: 'blur'
					}],
					new_password2: [{
						required: true,
						// message: this.$t('user.confirmPassword_pla'),
						validator: (rule, value, callback) => {
							if (value === '') {
								callback(new Error(this.$t('user.confirmPassword_pla')))
							} else {
								callback()
							}
						},
						trigger: 'blur'
					}],
				}
			}
		},
		methods: {
			navBack() {
				uni.navigateBack()
			},
			confirm() {
				this.$refs.formData.validate(async valid => {
					if (!valid) return
					this.success = true
					await changePwd(this.formData)
					uni.navigateBack()
				})
			}
		},
	}
</script>

<style scoped>
	/deep/ .el-form-item:first-child {
		height: 0 !important;
		margin: 0 !important;
	}
	/deep/ .el-form-item:first-child .el-input__inner {
		height: 0 !important;
		border: 0 !important;
	}
</style>
